<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <title>Document</title>
    <style>
        li {
           margin-right: 100px;
           /* 添加元素间隔 */
       }
       .li1{
           margin-left: 90px;
       }
       h3{
        margin-top: 20px;
       }
       .blue{
        background-color: skyblue;
       }
       #menu{display: flex;}
       #menu li{
        border: 1px solid white;
       }
   </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg  bg-light n1">
        <a class="navbar-brand" href="index.html"><img src="img/logo.jpeg" alt="..." height="80px" ></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse " id="navbarNav">
            <ul class="navbar-nav li1">
                <li class="nav-item active ">
                    <a class="nav-link" href="jianjie.html">简介 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="yewu.html">业务</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="esg.html">ESG</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="yuangong.html">员工</a>
                </li>
            </ul>
        </div>
        <form class="form-inline">
            <span id="username" onblur="user()"></span>
            <a href="denglu.html">登录/注册</a>
        </form>
    </nav>
    <div>
        <img src="./img/13.png" alt="" class="w-100"height="350px">
    </div>
    <div class="container" style="margin-top: 100px;">
        <ul class="nav" id="menu">
            <li class="nav-item">
              <a class="nav-link active dyl" href="#div1" id="n1" onclick="openCity(event,'div1')">面向用户</a>
            </li>
            <li class="nav-item">
              <a class="nav-link dyl" href="#div2" id="n2" onclick="openCity(event,'div2')">面向企业</a>
            </li>
            <li class="nav-item">
              <a class="nav-link dyl" href="#div3" id="n3" onclick="openCity(event,'div3')">创新科技</a>
            </li>
          </ul>
          <div  class="tab-content">
            <div class="tab-pane fade show active" id="div1" style="margin-top: 20px;">
            <h3>通信与社交</h3>
            
            <p>腾讯从连接人与人出发，开发和提供功能丰富、易于使用的即时通信和社交平台，以创新的方式让沟通、分享和交流变得更便捷、生动和个性化，丰富人们的生活。
            </p>
            <h3>数字内容</h3>
            <p>腾讯不断探索更适合未来趋势的多元化社交娱乐融合体。基于优质内容，以技术为驱动引擎，我们不断探索社交和内容融合的下一代形态。透过跨屏幕、多平台、多形态的模式，为互联网用户提供多元化、多维度的内容，以满足用户的不同娱乐体验。
                同时，腾讯深明版权及IP对创意产业发展的重要性。在尊重版权的基础上，我们不断在内容业务生态体系内发掘有潜质的IP，助力其成长。目前，我们的数字内容产品主要包括: 游戏、视频、直播、新闻、音乐、文学。</p>
        </div>
        <div class="tab-pane fade show active" id="div2" style="display: none; margin-top: 20px;">
            <h3>腾讯广告            </h3>
            <p>腾讯广告是国内领先的大数据营销平台，汇聚腾讯公司全量的应用场景，基于海量商业数据、营销技术与专业服务能力，提供一体化数字化营销方案。腾讯广告构建品牌与用户的美好连接，为客户提供高效的营销解决方案。不仅在广告形式上创新，亦在用户洞察、创意管理、投放策略、数字资产管理等全链路提供数字化服务，并结合云计算、AI、LBS、移动支付、小程序、卡券等前沿技术和应用创新，提供涵盖品牌推广、效果转化促销、零售等线上线下融通的一体化数字化营销方案。
            </p>
            <h3>腾讯云</h3>
            <p>腾讯云，腾讯倾力打造的云服务品牌，为客户提供领先的云产品与云服务。依托遍布全球的数据中心，我们将云计算、大数据、人工智能、物联网、安全等先进技术与智慧产业业务场景相结合，同时面向金融、教育、医疗、零售、工业、交通、能源、广电等领域，打造全面的智慧行业解决方案。目前，腾讯云已在互联网行业的电商、视频、生活服务方向取得明显优势地位，中国最优秀的互联网企业大部分选择腾讯云作为云服务商，同时服务包括中国银行、建设银行、中国人保、国家电网、中国商飞、中粮集团、上海交大等优秀的企业，帮助他们实现数字化和智慧化产业升级。</p>
        </div><div class="tab-pane fade show active" id="div2" style="display: none; margin-top: 20px;">
            <h3>人工智能           </h3>
            <p>腾讯的使命是通过互联网服务提升人类生活品质。人工智能使我们能够以全新而强大的方式履行使命。通过基础和应用研究，我们不断钻研提升人工智能科技能力，并落实到我们的产品和服务，惠泽人类。
            </p>
            <h3>前沿科技</h3>
            <p>腾讯已建立创新科技为基础的研发矩阵，打造面向未来的科技引擎，让技术创新惠及消费者，并在农业、工业、零售到医疗等多行业实现。</p>
        </div>
          </div>
    </div>
    <div  style="margin-top: 100px; margin-bottom: 10px;">
        <div class="row">
                <ul class="nav" style="margin-left: 150px;">
                    <li class="nav-item" style="text-align: center;">
                        <h4 style="margin-bottom: 20px;"class="c">加入我们</h4><br><br>
                        <a style="margin-top: 20px;"class="c">校园招聘</a><br><br>
                        <a style="margin-top: 20px;"class="c">社会招聘</a><br><br>
                        <a style="margin-top: 20px;"class="c">国际招聘</a>
                    </li>
                    <li class="nav-item" style="text-align: center;">
                        <h4 style="margin-bottom: 20px;">联系我们</h4><br><br>
                        <a href="" class="c">客户服务</a><br><br>
                        <a href="" class="c">合作洽谈</a><br><br>
                        <a href="" class="c">腾讯采购</a><br><br>
                        <a href="luyan.html">您的建议</a>
                    </li>
                    <li class="nav-item" style="text-align: center;">
                        <h4 style="margin-bottom: 20px;">法律信息</h4><br><br>
                        <a href="" class="c">服务协议</a><br><br>
                        <a href="" class="c">隐私政策</a><br><br>
                        <a href="" class="c">知识产权</a>
                    </li>
                    <li>
                        <img src="./img/logo.jpeg" alt="" class="w-100" height="200px">
                    </li>
                </ul>
                
            
        </div>
            
    </div>
    <script>
        function openCity(evt,name){
    var i ,tab ,tablinks
    tab=document.querySelectorAll(".fade")
    tablinks=document.querySelectorAll(".dyl")
    tablinks.forEach((item,index)=>{
        item.addEventListener("click",function(){
            tab.forEach(i=>{
                i.style.display="none"
            })
            tab[index].style.display='block'
        })
    })
}

var arr=document.querySelectorAll("#menu li")
arr.forEach(item=>{
    item.onmouseenter=function(){
        item.classList.add("blue")
    }
    item.onmouseout=function(){
        item.classList.remove("blue")
    }
})
    </script>
</body>
</html>